<template>
	<view class="review-box page-box">
		<u-navbar bgColor="#505CFE" height="74">
			<view class="u-nav-slot" slot="left" @click="goBack">
				<image style="height: 63rpx;width: 50rpx; scale: 0.8;" src="@/static/images/review/fanhui.png" />
			</view>
			<view class="u-nav-slot-center" slot="center">
				<span>智能读词</span>
			</view>
			<view class="u-nav-slot-right" slot="right">
				<image style="height: 53rpx;width: 53rpx; margin: 0 40rpx 0 32rpx;"
					src="@/static/images/review/set.png" />
				<image style="height: 53rpx;width: 53rpx; " src="@/static/images/review/help2.png" />
			</view>
		</u-navbar>
		<view class="content">
			<view class="content-son">
				
			</view>
		</view>
		<view class="demo-train">
			学习数据
		</view>
		<view class="right-btn">
			<view class="image-yin image-yin1 flex-align-center">
				<view class="yin-bj-ff flex-center">
					<image src="@/static/images/review/yinlianglan.png" />
				</view>
				<span>标准音</span>
			</view>
			<view class="image-yin image-yin2 flex-align-center">
				<view class="yin-bj-ff flex-center">
					<image src="@/static/images/review/yinliangcheng.png" />
				</view>
				<span>得分</span>
			</view>
			<view class="image-bj image-follow flex-center">
				请跟读
			</view>
		</view>
		<view class="total">
			需要复习量：0
		</view>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {

			};
		},
		methods: {
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			tabChange(val) {
				console.log(val);
				this.currentTab = val;
			}
		}
	}
</script>

<style lang="scss">
	@function px_2_vw($px) {
		@return #{$px * 100 / 1920}vw;
	}

	.page-box {
		position: relative;
	}

	.u-nav-slot-center {
		display: flex;
		align-items: center;
		color: #B0B0B0;
		font-size: px_2_vw(54);

	}

	.u-nav-slot-right {

		display: flex;
		align-items: center;
		justify-content: center;

		.playback-speed {
			width: px_2_vw(233);
			height: px_2_vw(49);
			font-size: px_2_vw(29);
			color: #B0B0B0;
			background-image: url('@/static/images/review/bofangsudu.png');
			background-size: 100% 100%;
		}
	}

	.content {
		width: 75%;
		height: 70%;
		// background: #616CFF;
		border-radius: 65rpx;
		padding: 30rpx;
		margin: 160rpx auto;

		.content-son {
			padding: 100rpx;
			width: 100%;
			height: 100%;
			background: #fff;
			border-radius: 20rpx;
			font-weight: bold;
			font-size: px_2_vw(56);
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.word {
				image {
					width: px_2_vw(108);
					height: px_2_vw(113);
				}
			}

			.word-name {
				color: #8ABBFF;
				margin-left: 30rpx;
			}

			.input-custom {
				width: 100%;
				height: px_2_vw(120);
				margin-top: 120rpx;
				// ::v-deep .uni-input-wrapper{
				// 	height: px_2_vw(120) !important;
				// 	caret-color:red;

				// }
			}


		}
	}

	.right-btn {
		position: absolute;
		right: 0;
		top: 160rpx;
		padding: 83rpx 33rpx 0 33rpx;
		height: 50%;
		color: #FFFAFA;
		display: flex;
		flex-direction: column;
		// justify-content: space-around;
		align-items: center;

		.image-yin {

			width: px_2_vw(188);
			height: px_2_vw(74);
			color: #FFFAFA;
			font-size: px_2_vw(30);
			padding: 0 10rpx;

			span {
				margin-left: 10rpx;
			}
		}

		.yin-bj-ff {
			background: #FFFAFA;
			width: px_2_vw(60);
			height: px_2_vw(60);
			border-radius: 50%;

			image {
				width: px_2_vw(35);
				height: px_2_vw(30);

			}
		}

		.image-bj {
			width: px_2_vw(158);
			height: px_2_vw(151);

		}

		.image-yin1 {
			background-image: url('@/static/images/review/biaozhunyin.png');
			background-size: 100% 100%;
		}

		.image-yin2 {
			background-image: url('@/static/images/review/defen-bj.png');
			background-size: 100% 100%;
			margin-top: 60rpx;
		}

		.image-yin-bj {
			background-image: url('@/static/images/review/defen-bj.png');
			background-size: 100% 100%;
		}

		.image-follow {
			background-image: url('@/static/images/review/gendu-bj.png');
			background-size: 100% 100%;
			font-size: px_2_vw(40);
			margin-top: 100rpx;
		}
	}

	.demo-train {
		color: #fff;
		width: px_2_vw(76);
		height: px_2_vw(192);
		position: absolute;
		writing-mode: vertical-rl;
		letter-spacing: 5rpx;
		left: 0;
		top: 50%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: px_2_vw(29);
		color: rgb(80, 92, 254);
		border: 1rpx solid rgb(80, 92, 254);
		border-left: none;
		border-radius:0 20rpx 20rpx 0; 
		background-size: 100% 100%;
	}
	
	.total {
		color: #3B96FC;
		font-size: px_2_vw(33);
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		font-weight: 400;
	}
</style>